<template>
  <van-nav-bar
    title="医嘱执行"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  >
  </van-nav-bar>
  <div class="container">
    <div class="container-item">
      <van-field
        v-model="user.chuanghao"
        label="患者床号"
        placeholder="请输入床号"
      />
    </div>
    <div class="container-item">
      <van-field
        v-model="user.name"
        label="患者姓名"
        placeholder="请输入姓名"
      />
    </div>
  </div>
  <div>
    <van-tabs v-model:active="active" type="card" @click-tab="onClickTab">
      <van-tab title="未执行：白色">
        <div class="table">
          <div class="table-head">医嘱</div>
          <div
            class="table-zu"
            @click="bianjiyz(item.chiled)"
            v-for="(item, index) in advicelist"
            :key="index"
          >
            <div
              class="table-item"
              :class="[
                item1.groupnosymbol === '┑' ? 'tz-start' : '',
                item1.groupnosymbol === '|' ? 'tz-center' : '',
                item1.groupnosymbol === '┙' ? 'tz-stop' : '',
              ]"
              v-for="(item1, index1) in item.chiled"
              :key="index1"
            >
              <p>{{ item1.drugname }}</p>
              <p>{{ item1.frequence }}&nbsp;&nbsp;{{ item1.method }}</p>
              <p>{{ item1.dosage }}{{ item1.dosageunit }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="开始：绿色">
        <div class="table">
          <div class="table-head">医嘱</div>
          <div
            class="table-zu"
            @click="bianjiyz(item.chiled)"
            v-for="(item, index) in yadvicelist"
            :key="index"
          >
            <div
              class="table-item table-green"
              :class="[
                item1.groupnosymbol === '┑' ? 'tz-start' : '',
                item1.groupnosymbol === '|' ? 'tz-center' : '',
                item1.groupnosymbol === '┙' ? 'tz-stop' : '',
              ]"
              v-for="(item1, index1) in item.chiled"
              :key="index1"
            >
              <p>{{ item1.drugname }}</p>
              <p>{{ item1.frequence }}&nbsp;&nbsp;{{ item1.method }}</p>
              <p>{{ item1.dosage }}{{ item1.dosageunit }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="停止：黄色">
        <div class="table">
          <div class="table-head">医嘱</div>
          <div
            class="table-zu"
            @click="bianjiyz(item.chiled)"
            v-for="(item, index) in yadvicelist"
            :key="index"
          >
            <div
              class="table-item table-yellow"
              :class="[
                item1.groupnosymbol === '┑' ? 'tz-start' : '',
                item1.groupnosymbol === '|' ? 'tz-center' : '',
                item1.groupnosymbol === '┙' ? 'tz-stop' : '',
              ]"
              v-for="(item1, index1) in item.chiled"
              :key="index1"
            >
              <p>{{ item1.drugname }}</p>
              <p>{{ item1.frequence }}&nbsp;&nbsp;{{ item1.method }}</p>
              <p>{{ item1.dosage }}{{ item1.dosageunit }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="完成：棕色">
        <div class="table">
          <div class="table-head">医嘱</div>
           <div
            class="table-zu"
            @click="bianjiyz(item.chiled)"
            v-for="(item, index) in yadvicelist"
            :key="index"
          >
            <div
              class="table-item table-brown"
              :class="[
                item1.groupnosymbol === '┑' ? 'tz-start' : '',
                item1.groupnosymbol === '|' ? 'tz-center' : '',
                item1.groupnosymbol === '┙' ? 'tz-stop' : '',
              ]"
              v-for="(item1, index1) in item.chiled"
              :key="index1"
            >
              <p>{{ item1.drugname }}</p>
              <p>{{ item1.frequence }}&nbsp;&nbsp;{{ item1.method }}</p>
              <p>{{ item1.dosage }}{{ item1.dosageunit }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <van-overlay :show="show" @click="show = false">
    <div class="wrapper">
      <div class="block" @click.stop>
        <van-nav-bar
          title="编辑医嘱"
          left-text="返回"
          left-arrow
          @click-left="show = false"
        />
        <van-cell-group>
          <van-cell title="开始时间" :value="formyz.startTime" />
          <van-field
            v-model="formyz.content"
            rows="2"
            autosize
            label="医嘱内容"
            type="textarea"
          />
          <van-field v-model="formyz.qt" center clearable label="其他信息">
            <template #button>
              <van-button size="small" type="primary" @click="baocunqita"
                >保存</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
        <div class="foot">
          <van-space>
            <van-button type="primary" @click="kszx" v-show="formyz.state == '' && active!=3">开始执行</van-button
            >
            <van-button type="primary" @click="zt" v-show="formyz.state != '' && active!=3"
              >暂停执行</van-button
            >
            <van-button type="primary" @click="wc" v-show="formyz.state != '' && active!=3"
              >执行完毕</van-button
            >
          </van-space>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { reactive, ref, onMounted } from "vue";
import { getyzxlist, getwzxlist, execute,bcqtxx } from "@/api/advice";
const router = useRouter();

const selectitem = JSON.parse(localStorage.getItem("selectitem"));
const user = ref(selectitem);
function onClickLeft() {
  console.log("onClickLeft");
  //返回上一页
  router.back();
}

const active = ref(0);
const show = ref(false);
const advicelist = ref([]);
onMounted(() => {
  getlist();
});
function getlist() {
  getwzxlist({
    zyh: selectitem.zyh,
    // zyh: "20250037",
  }).then((res) => {
    if (res.code == 0) {
      advicelist.value = res.data;
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
}

const yadvicelist = ref([]);
function getlist1() {
  getyzxlist({
    zyh: selectitem.zyh,
    state: active.value, 
    // zyh: "20250037",
  }).then((res) => {
    if (res.code == 0) {
      yadvicelist.value = res.data;
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
}
function onClickTab() {
  console.log("点击了标签", active.value);
  getlist1();
}

const formyz = ref({
  starttime: "",
  content: "",
  qt: "",
  item: [],
  state: "",
});
function bianjiyz(item) {
  console.log("编辑医嘱", item);
  let stringc = "";
  item.forEach((element) => {
    stringc += element.drugname + "\n";
  });
  formyz.value = {
    starttime: item[0].starttime || "",
    content: stringc,
    qt: item[0].remark || "",
    item: item,
    state: item[0].state || "",
  };
  show.value = true;
}
function baocunqita() {
  if (
    formyz.value.qt &&
    formyz.value.qt.trim() != "" &&
    formyz.value.state != ""
  ) {
    bcqtxx({
      id: formyz.value.item[0].id,
      remark: formyz.value.qt,
    }).then((res) => {
      if (res.code == 0) {
        showNotify({
          type: "success",
          position: "bottom",
          message: "保存成功",
        });
        getlist();
      }
    });
  }
}
function kszx() {
  //   console.log("开始执行", formyz.value);
  if (formyz.value.content.trim() === "") {
    showNotify({
      type: "warning",
      position: "bottom",
      message: "医嘱内容不能为空",
    });
    return;
  }
  execute({
    item: formyz.value.item,
    type: "kszx",
  }).then((res) => {
    if (res.code == 0) {
      showNotify({
        type: "success",
        position: "bottom",
        message: "开始执行成功",
      });
      getlist();
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
  showNotify({ type: "success", position: "bottom", message: "开始执行成功" });
  show.value = false;
}
function zt() {
  console.log("暂停执行");
  execute({
    item: formyz.value.item,
    type: "ztzx",
  }).then((res) => {
    if (res.code == 0) {
      showNotify({
        type: "success",
        position: "bottom",
        message: "暂停执行成功",
      });
      getlist1();
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
  showNotify({ type: "warning", position: "bottom", message: "暂停执行" });
  show.value = false;
}
function wc() {
  console.log("执行完毕");
   execute({
    item: formyz.value.item,
    type: "wczx",
  }).then((res) => {
    if (res.code == 0) {
      showNotify({
        type: "success",
        position: "bottom",
        message: "执行完毕成功",
      });
      getlist1();
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
  showNotify({ type: "success", position: "bottom", message: "执行完毕" });
  show.value = false;
}
</script>

<style>
.container {
  display: flex;
}
.container-item {
  flex: 1;
}
.table {
  width: 96%;
  margin: 10px auto 0 auto;
}
.table-head {
  border: 1px solid #8fd0fc;
  background-color: #d8e5ff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  font-size: 14px;
}
.table-item {
  border: 1px solid #c8d3de;
  margin: 2px 0;
  display: flex;
}
.table-item > p {
  flex: 1;
  height: 40px;
  line-height: 40px;
}
.table-item > p:first-child {
  text-indent: 10px;
}
.table-item > p:last-child {
  text-align: right;
  padding-right: 10px;
}
.table-zu:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
.table-green {
  background-color: #d1e9c6;
  color: #2c7d2c;
}
.table-yellow {
  background-color: #fdf2c0;
  color: #7d6c2c;
}
.table-brown {
  background-color: #f2e0d1;
  color: #7d4c2c;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  background-color: #ececec;
  margin: 0 10px;
}
.foot {
  padding: 10px;
}

/*同组标记 begin*/
.tz-start,
.tz-center,
.tz-stop {
  position: relative;
}
.tz-start::before,
.tz-center::before,
.tz-stop::before {
  position: absolute;
  content: "";
  left: 5px;
  width: 5px;
  border-right: 1px solid #000000;
  /* 新增水平翻转 */
  transform: scaleX(-1);
}
.tz-start::before {
  bottom: -7px;
  top: 14px;
  border-top: 1px solid #000000;
}
.tz-center::before {
  bottom: -7px;
  top: -7px;
}
.tz-stop::before {
  bottom: 14px;
  top: -7px;
  border-bottom: 1px solid #000000;
}
/*同组标记 end*/
</style>
